﻿var Index = function () {
	return {

		//main function
		init: function () {
			App.addResponsiveHandler(function () {
				jQuery('.vmaps').each(function () {
					var map = jQuery(this);
					map.width(map.parent().width());
				});
			});
		},

		initJQVMAP: function () {

			var showMap = function (name) {
				jQuery('.vmaps').hide();
				jQuery('#vmap_' + name).show();
			}

			var setMap = function (name) {
				var data = {
					map: 'world_en',
					backgroundColor: null,
					borderColor: '#333333',
					borderOpacity: 0.5,
					borderWidth: 1,
					color: '#c6c6c6',
					enableZoom: true,
					hoverColor: '#c9dfaf',
					hoverOpacity: null,
					values: sample_data,
					normalizeFunction: 'linear',
					scaleColors: ['#b6da93', '#909cae'],
					selectedColor: '#c9dfaf',
					selectedRegion: null,
					showTooltip: true,
					onLabelShow: function (event, label, code) {

					},
					onRegionOver: function (event, code) {
						if (code == 'ca') {
							event.preventDefault();
						}
					},
					onRegionClick: function (element, code, region) {
						var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
						alert(message);
					}
				};

				data.map = name + '_en';
				var map = jQuery('#vmap_' + name);
				if (!map) {
					return;
				}
				map.width(map.parent().parent().width());
				map.show();
				map.vectorMap(data);
				map.hide();
			}

			setMap("world");
			setMap("usa");
			setMap("europe");
			setMap("russia");
			setMap("germany");
			showMap("world");

			jQuery('#regional_stat_world').click(function () {
				showMap("world");
			});

			jQuery('#regional_stat_usa').click(function () {
				showMap("usa");
			});

			jQuery('#regional_stat_europe').click(function () {
				showMap("europe");
			});
			jQuery('#regional_stat_russia').click(function () {
				showMap("russia");
			});
			jQuery('#regional_stat_germany').click(function () {
				showMap("germany");
			});

			$('#region_statistics_loading').hide();
			$('#region_statistics_content').show();
		},

		initCalendar: function () {
			if (!jQuery().fullCalendar) {
				return;
			}

			var date = new Date();
			var d = date.getDate();
			var m = date.getMonth();
			var y = date.getFullYear();

			var h = {};

			if ($('#calendar').width() <= 400) {
				$('#calendar').addClass("mobile");
				h = {
					left: 'title, prev, next',
					center: '',
					right: 'today,month,agendaWeek,agendaDay'
				};
			} else {
				$('#calendar').removeClass("mobile");
				if (App.isRTL()) {
					h = {
						right: 'title',
						center: '',
						left: 'prev,next,today,month,agendaWeek,agendaDay'
					};
				} else {
					h = {
						left: 'title',
						center: '',
						right: 'prev,next,today,month,agendaWeek,agendaDay'
					};
				}
			}

			$('#calendar').fullCalendar('destroy'); // destroy the calendar
			$('#calendar').fullCalendar({ //re-initialize the calendar
				disableDragging: false,
				header: h,
				editable: true,
				events: [{
					title: 'All Day Event',
					start: new Date(y, m, 1),
					backgroundColor: App.getLayoutColorCode('yellow')
				}, {
					title: 'Long Event',
					start: new Date(y, m, d - 5),
					end: new Date(y, m, d - 2),
					backgroundColor: App.getLayoutColorCode('green')
				}, {
					title: 'Repeating Event',
					start: new Date(y, m, d - 3, 16, 0),
					allDay: false,
					backgroundColor: App.getLayoutColorCode('red')
				}, {
					title: 'Repeating Event',
					start: new Date(y, m, d + 4, 16, 0),
					allDay: false,
					backgroundColor: App.getLayoutColorCode('green')
				}, {
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				}, {
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					backgroundColor: App.getLayoutColorCode('grey'),
					allDay: false
				}, {
					title: 'Birthday Party',
					start: new Date(y, m, d + 1, 19, 0),
					end: new Date(y, m, d + 1, 22, 30),
					backgroundColor: App.getLayoutColorCode('purple'),
					allDay: false
				}, {
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					backgroundColor: App.getLayoutColorCode('yellow'),
					url: 'http://google.com/'
				}
				]
			});
		},

		initCharts: function () {
			if (!jQuery.plot) {
				return;
			}

			var data = [];
			var totalPoints = 250;

			// random data generator for plot charts

			function getRandomData() {
				if (data.length > 0) data = data.slice(1);
				// do a random walk
				while (data.length < totalPoints) {
					var prev = data.length > 0 ? data[data.length - 1] : 50;
					var y = prev + Math.random() * 10 - 5;
					if (y < 0) y = 0;
					if (y > 100) y = 100;
					data.push(y);
				}
				// zip the generated y values with the x values
				var res = [];
				for (var i = 0; i < data.length; ++i) res.push([i, data[i]])
				return res;
			}

			function showTooltip(title, x, y, contents) {
				$('<div id="tooltip" class="chart-tooltip"><div class="date">' + title + '<\/div><div class="label label-success">CTR: ' + x / 10 + '%<\/div><div class="label label-danger">Imp: ' + x * 12 + '<\/div><\/div>').css({
					position: 'absolute',
					display: 'none',
					top: y - 100,
					width: 80,
					left: x - 40,
					border: '0px solid #ccc',
					padding: '2px 6px',
					'background-color': '#fff'
				}).appendTo("body").fadeIn(200);
			}

			function randValue() {
				return (Math.floor(Math.random() * (1 + 50 - 20))) + 10;
			}

			var pageviews = [
				[1, randValue()],
				[2, randValue()],
				[3, 2 + randValue()],
				[4, 3 + randValue()],
				[5, 5 + randValue()],
				[6, 10 + randValue()],
				[7, 15 + randValue()],
				[8, 20 + randValue()],
				[9, 25 + randValue()],
				[10, 30 + randValue()],
				[11, 35 + randValue()],
				[12, 25 + randValue()],
				[13, 15 + randValue()],
				[14, 20 + randValue()],
				[15, 45 + randValue()],
				[16, 50 + randValue()],
				[17, 65 + randValue()],
				[18, 70 + randValue()],
				[19, 85 + randValue()],
				[20, 80 + randValue()],
				[21, 75 + randValue()],
				[22, 80 + randValue()],
				[23, 75 + randValue()],
				[24, 70 + randValue()],
				[25, 65 + randValue()],
				[26, 75 + randValue()],
				[27, 80 + randValue()],
				[28, 85 + randValue()],
				[29, 90 + randValue()],
				[30, 95 + randValue()]
			];

			var visitors = [
				[1, randValue() - 5],
				[2, randValue() - 5],
				[3, randValue() - 5],
				[4, 6 + randValue()],
				[5, 5 + randValue()],
				[6, 20 + randValue()],
				[7, 25 + randValue()],
				[8, 36 + randValue()],
				[9, 26 + randValue()],
				[10, 38 + randValue()],
				[11, 39 + randValue()],
				[12, 50 + randValue()],
				[13, 51 + randValue()],
				[14, 12 + randValue()],
				[15, 13 + randValue()],
				[16, 14 + randValue()],
				[17, 15 + randValue()],
				[18, 15 + randValue()],
				[19, 16 + randValue()],
				[20, 17 + randValue()],
				[21, 18 + randValue()],
				[22, 19 + randValue()],
				[23, 20 + randValue()],
				[24, 21 + randValue()],
				[25, 14 + randValue()],
				[26, 24 + randValue()],
				[27, 25 + randValue()],
				[28, 26 + randValue()],
				[29, 27 + randValue()],
				[30, 31 + randValue()]
			];

			if ($('#site_statistics').size() != 0) {

				$('#site_statistics_loading').hide();
				$('#site_statistics_content').show();

				var plot_statistics = $.plot($("#site_statistics"), [{
					data: pageviews,
					label: "Unique Visits"
				}, {
					data: visitors,
					label: "Page Views"
				}
				], {
					series: {
						lines: {
							show: true,
							lineWidth: 2,
							fill: true,
							fillColor: {
								colors: [{
									opacity: 0.05
								}, {
									opacity: 0.01
								}
								]
							}
						},
						points: {
							show: true
						},
						shadowSize: 2
					},
					grid: {
						hoverable: true,
						clickable: true,
						tickColor: "#eee",
						borderWidth: 0
					},
					colors: ["#d12610", "#37b7f3", "#52e136"],
					xaxis: {
						ticks: 11,
						tickDecimals: 0
					},
					yaxis: {
						ticks: 11,
						tickDecimals: 0
					}
				});

				var previousPoint = null;
				$("#site_statistics").bind("plothover", function (event, pos, item) {
					$("#x").text(pos.x.toFixed(2));
					$("#y").text(pos.y.toFixed(2));
					if (item) {
						if (previousPoint != item.dataIndex) {
							previousPoint = item.dataIndex;

							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
								y = item.datapoint[1].toFixed(2);

							showTooltip('24 Jan 2013', item.pageX, item.pageY, item.series.label + " of " + x + " = " + y);
						}
					} else {
						$("#tooltip").remove();
						previousPoint = null;
					}
				});
			}

			if ($('#load_statistics').size() != 0) {
				//server load
				$('#load_statistics_loading').hide();
				$('#load_statistics_content').show();

				var updateInterval = 30;
				var plot_statistics = $.plot($("#load_statistics"), [getRandomData()], {
					series: {
						shadowSize: 1
					},
					lines: {
						show: true,
						lineWidth: 0.2,
						fill: true,
						fillColor: {
							colors: [{
								opacity: 0.1
							}, {
								opacity: 1
							}
							]
						}
					},
					yaxis: {
						min: 0,
						max: 100,
						tickFormatter: function (v) {
							return v + "%";
						}
					},
					xaxis: {
						show: false
					},
					colors: ["#e14e3d"],
					grid: {
						tickColor: "#a8a3a3",
						borderWidth: 0
					}
				});

				var statisticsUpdate = function () {
					plot_statistics.setData([getRandomData()]);
					plot_statistics.draw();
					setTimeout(statisticsUpdate, updateInterval);
				}

				statisticsUpdate();

				$('#load_statistics').bind("mouseleave", function () {
					$("#tooltip").remove();
				});
			}

			if ($('#site_activities').size() != 0) {
				//site activities
				var previousPoint2 = null;
				$('#site_activities_loading').hide();
				$('#site_activities_content').show();

				var activities = [
					[1, 10],
					[2, 9],
					[3, 8],
					[4, 6],
					[5, 5],
					[6, 3],
					[7, 9],
					[8, 10],
					[9, 12],
					[10, 14],
					[11, 15],
					[12, 13],
					[13, 11],
					[14, 10],
					[15, 9],
					[16, 8],
					[17, 12],
					[18, 14],
					[19, 16],
					[20, 19],
					[21, 20],
					[22, 20],
					[23, 19],
					[24, 17],
					[25, 15],
					[25, 14],
					[26, 12],
					[27, 10],
					[28, 8],
					[29, 10],
					[30, 12],
					[31, 10],
					[32, 9],
					[33, 8],
					[34, 6],
					[35, 5],
					[36, 3],
					[37, 9],
					[38, 10],
					[39, 12],
					[40, 14],
					[41, 15],
					[42, 13],
					[43, 11],
					[44, 10],
					[45, 9],
					[46, 8],
					[47, 12],
					[48, 14],
					[49, 16],
					[50, 12],
					[51, 10]
				];

				var plot_activities = $.plot(
					$("#site_activities"), [{
						data: activities,
						color: "rgba(107,207,123, 0.9)",
						shadowSize: 0,
						bars: {
							show: true,
							lineWidth: 0,
							fill: true,
							fillColor: {
								colors: [{
									opacity: 1
								}, {
									opacity: 1
								}
								]
							}
						}
					}
					], {
						series: {
							bars: {
								show: true,
								barWidth: 0.9
							}
						},
						grid: {
							show: false,
							hoverable: true,
							clickable: false,
							autoHighlight: true,
							borderWidth: 0
						},
						yaxis: {
							min: 0,
							max: 20
						}
					});

				$("#site_activities").bind("plothover", function (event, pos, item) {
					$("#x").text(pos.x.toFixed(2));
					$("#y").text(pos.y.toFixed(2));
					if (item) {
						if (previousPoint2 != item.dataIndex) {
							previousPoint2 = item.dataIndex;
							$("#tooltip").remove();
							var x = item.datapoint[0].toFixed(2),
								y = item.datapoint[1].toFixed(2);
							showTooltip('24 Feb 2013', item.pageX, item.pageY, x);
						}
					}
				});

				$('#site_activities').bind("mouseleave", function () {
					$("#tooltip").remove();
				});
			}
		},

		initMiniCharts: function () {

			$('.easy-pie-chart .number.transactions').easyPieChart({
				animate: 1000,
				size: 75,
				lineWidth: 3,
				barColor: App.getLayoutColorCode('yellow')
			});

			$('.easy-pie-chart .number.visits').easyPieChart({
				animate: 1000,
				size: 75,
				lineWidth: 3,
				barColor: App.getLayoutColorCode('green')
			});

			$('.easy-pie-chart .number.bounce').easyPieChart({
				animate: 1000,
				size: 75,
				lineWidth: 3,
				barColor: App.getLayoutColorCode('red')
			});

			$('.easy-pie-chart-reload').click(function () {
				$('.easy-pie-chart .number').each(function () {
					var newValue = Math.floor(100 * Math.random());
					$(this).data('easyPieChart').update(newValue);
					$('span', this).text(newValue);
				});
			});

			$("#sparkline_bar").sparkline([8, 9, 10, 11, 10, 10, 12, 10, 10, 11, 9, 12, 11, 10, 9, 11, 13, 13, 12], {
				type: 'bar',
				width: '100',
				barWidth: 5,
				height: '55',
				barColor: '#35aa47',
				negBarColor: '#e02222'
			}
			);

			$("#sparkline_bar2").sparkline([9, 11, 12, 13, 12, 13, 10, 14, 13, 11, 11, 12, 11, 11, 10, 12, 11, 10], {
				type: 'bar',
				width: '100',
				barWidth: 5,
				height: '55',
				barColor: '#ffb848',
				negBarColor: '#e02222'
			}
			);

			$("#sparkline_line").sparkline([9, 10, 9, 10, 10, 11, 12, 10, 10, 11, 11, 12, 11, 10, 12, 11, 10, 12], {
				type: 'line',
				width: '100',
				height: '55',
				lineColor: '#ffb848'
			});

		},

		initChat: function () {

			var cont = $('#chats');
			var list = $('.chats', cont);
			var form = $('.chat-form', cont);
			var input = $('input', form);
			var btn = $('.btn', form);

			var handleClick = function (e) {
				e.preventDefault();

				var text = input.val();
				if (text.length == 0) {
					return;
				}

				var time = new Date();
				var time_str = time.toString('MMM dd, yyyy hh:mm');
				var tpl = '';
				tpl += '<li class="out">';
				tpl += '<img class="avatar" alt="" src="/Content/Images/metronic/avatar1.jpg"/>';
				tpl += '<div class="message">';
				tpl += '<span class="arrow"></span>';
				tpl += '<a href="#" class="name">Bob Nilson</a>&nbsp;';
				tpl += '<span class="datetime">at ' + time_str + '</span>';
				tpl += '<span class="body">';
				tpl += text;
				tpl += '</span>';
				tpl += '</div>';
				tpl += '</li>';

				var msg = list.append(tpl);
				input.val("");
				$('.scroller', cont).slimScroll({
					scrollTo: list.height()
				});
			}

			/*
			$('.scroller', cont).slimScroll({
				scrollTo: list.height()
			});
			*/

			$('body').on('click', '.message .name', function (e) {
				e.preventDefault(); // prevent click event

				var name = $(this).text(); // get clicked user's full name
				input.val('@' + name + ':'); // set it into the input field
				App.scrollTo(input); // scroll to input if needed
			});

			btn.click(handleClick);
			input.keypress(function (e) {
				if (e.which == 13) {
					handleClick();
					return false; //<---- Add this line
				}
			});
		},

		initDashboardDaterange: function () {

			$('#dashboard-report-range').daterangepicker({
				opens: (App.isRTL() ? 'right' : 'left'),
				startDate: moment().subtract('days', 29),
				endDate: moment(),
				minDate: '01/01/2012',
				maxDate: '12/31/2014',
				dateLimit: {
					days: 60
				},
				showDropdowns: false,
				showWeekNumbers: true,
				timePicker: false,
				timePickerIncrement: 1,
				timePicker12Hour: true,
				ranges: {
					'Today': [moment(), moment()],
					'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
					'Last 7 Days': [moment().subtract('days', 6), moment()],
					'Last 30 Days': [moment().subtract('days', 29), moment()],
					'This Month': [moment().startOf('month'), moment().endOf('month')],
					'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
				},
				buttonClasses: ['btn'],
				applyClass: 'blue',
				cancelClass: 'default',
				format: 'MM/DD/YYYY',
				separator: ' to ',
				locale: {
					applyLabel: 'Apply',
					fromLabel: 'From',
					toLabel: 'To',
					customRangeLabel: 'Custom Range',
					daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
					monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
					firstDay: 1
				}
			},
			function (start, end) {
				console.log("Callback has been called!");
				$('#dashboard-report-range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
			}
			);


			$('#dashboard-report-range span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
			$('#dashboard-report-range').show();
		},

		initIntro: function () {
			if ($.cookie('intro_show')) {
				return;
			}

			$.cookie('intro_show', 1);

			setTimeout(function () {
				var unique_id = $.gritter.add({
					// (string | mandatory) the heading of the notification
					title: 'Meet Metronic!',
					// (string | mandatory) the text inside the notification
					text: 'Metronic is a brand new Responsive Admin Dashboard Template you have always been looking for!',
					// (string | optional) the image to display on the left
					image: '"/Content/Images/metronic/avatar1.jpg',
					// (bool | optional) if you want it to fade out on its own or just sit there
					sticky: true,
					// (int | optional) the time you want it to be alive for before fading out
					time: '',
					// (string | optional) the class name you want to apply to that specific message
					class_name: 'my-sticky-class'
				});

				// You can have it return a unique id, this can be used to manually remove it later using
				setTimeout(function () {
					$.gritter.remove(unique_id, {
						fade: true,
						speed: 'slow'
					});
				}, 12000);
			}, 2000);

			setTimeout(function () {
				var unique_id = $.gritter.add({
					// (string | mandatory) the heading of the notification
					title: 'Buy Metronic!',
					// (string | mandatory) the text inside the notification
					text: 'Metronic comes with a huge collection of reusable and easy customizable UI components and plugins. Buy Metronic today!',
					// (string | optional) the image to display on the left
					image: '"/Content/Images/metronic/avatar1.jpg',
					// (bool | optional) if you want it to fade out on its own or just sit there
					sticky: true,
					// (int | optional) the time you want it to be alive for before fading out
					time: '',
					// (string | optional) the class name you want to apply to that specific message
					class_name: 'my-sticky-class'
				});

				// You can have it return a unique id, this can be used to manually remove it later using
				setTimeout(function () {
					$.gritter.remove(unique_id, {
						fade: true,
						speed: 'slow'
					});
				}, 13000);
			}, 8000);

			setTimeout(function () {

				$('#styler').pulsate({
					color: "#bb3319",
					repeat: 10
				});

				$.extend($.gritter.options, {
					position: 'top-left'
				});

				var unique_id = $.gritter.add({
					position: 'top-left',
					// (string | mandatory) the heading of the notification
					title: 'Customize Metronic!',
					// (string | mandatory) the text inside the notification
					text: 'Metronic allows you to easily customize the theme colors and layout settings.',
					// (string | optional) the image to display on the left
					image1: '"/Content/Images/metronic/avatar1.png',
					// (bool | optional) if you want it to fade out on its own or just sit there
					sticky: true,
					// (int | optional) the time you want it to be alive for before fading out
					time: '',
					// (string | optional) the class name you want to apply to that specific message
					class_name: 'my-sticky-class'
				});

				$.extend($.gritter.options, {
					position: 'top-right'
				});

				// You can have it return a unique id, this can be used to manually remove it later using
				setTimeout(function () {
					$.gritter.remove(unique_id, {
						fade: true,
						speed: 'slow'
					});
				}, 15000);

			}, 23000);

			setTimeout(function () {

				$.extend($.gritter.options, {
					position: 'top-left'
				});

				var unique_id = $.gritter.add({
					// (string | mandatory) the heading of the notification
					title: 'Notification',
					// (string | mandatory) the text inside the notification
					text: 'You have 3 new notifications.',
					// (string | optional) the image to display on the left
					image1: '"/Content/Images/metronic/image1.jpg',
					// (bool | optional) if you want it to fade out on its own or just sit there
					sticky: true,
					// (int | optional) the time you want it to be alive for before fading out
					time: '',
					// (string | optional) the class name you want to apply to that specific message
					class_name: 'my-sticky-class'
				});

				setTimeout(function () {
					$.gritter.remove(unique_id, {
						fade: true,
						speed: 'slow'
					});
				}, 4000);

				$.extend($.gritter.options, {
					position: 'top-right'
				});

				var number = $('#header_notification_bar .badge').text();
				number = parseInt(number);
				number = number + 3;
				$('#header_notification_bar .badge').text(number);
				$('#header_notification_bar').pulsate({
					color: "#66bce6",
					repeat: 5
				});

			}, 40000);

			setTimeout(function () {

				$.extend($.gritter.options, {
					position: 'top-left'
				});

				var unique_id = $.gritter.add({
					// (string | mandatory) the heading of the notification
					title: 'Inbox',
					// (string | mandatory) the text inside the notification
					text: 'You have 2 new messages in your inbox.',
					// (string | optional) the image to display on the left
					image1: '"/Content/Images/metronic/avatar1.jpg',
					// (bool | optional) if you want it to fade out on its own or just sit there
					sticky: true,
					// (int | optional) the time you want it to be alive for before fading out
					time: '',
					// (string | optional) the class name you want to apply to that specific message
					class_name: 'my-sticky-class'
				});

				$.extend($.gritter.options, {
					position: 'top-right'
				});

				setTimeout(function () {
					$.gritter.remove(unique_id, {
						fade: true,
						speed: 'slow'
					});
				}, 4000);

				var number = $('#header_inbox_bar .badge').text();
				number = parseInt(number);
				number = number + 2;
				$('#header_inbox_bar .badge').text(number);
				$('#header_inbox_bar').pulsate({
					color: "#dd5131",
					repeat: 5
				});

			}, 60000);
		}

	};

}();